<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 消息管理 </el-breadcrumb-item>
                <el-breadcrumb-item>更新假条</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="员工编号" prop="tid">
                        <el-input v-model="form.tid" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="员工姓名" prop="name">
                        <el-input v-model="form.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="请假时间" prop="date">
                        <el-date-picker
                            v-model="form.date"
                            @change="setTimeValue"
                            type="daterange"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="审批人" prop="leader">
                        <el-select v-model="form.leader" placeholder="请选择">
                            <el-option
                            v-for="(item,index) in superiors"
                            :key="index"
                            :label="item.name"
                            :value="item.tellerId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-switch
                            v-model="form.status"
                            active-value="01"
                            inactive-value="00"
                            active-text="已读"
                            inactive-text="未读">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="进程" prop="result">
                        <el-select v-model="form.result" placeholder="请选择">
                            <el-option
                            v-for="(item,index) in leaveResult"
                            :key="index"
                            :label="item"
                            :value="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    
                       <el-form-item label="假条状态" prop="title">
                        <el-switch
                            style="display: block"
                            v-model="form.selfEnable"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="01"
                            inactive-value="00"
                            active-text="正常"
                            inactive-text="已删除">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="请假原因" prop="description">
                        <el-input type="textarea" rows="5" v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                        <el-button type="primary" @click="onSubmit('form')" icon="el-icon-edit">更改</el-button>
                        <el-button type="warning" @click="reset('form')" icon="el-icon-refresh-right">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            
            leave:{},
            superiors:[],
            id:this.$route.query.id,
            leaveResult:[],
            form: {
                id:{},
                tid: '',
                pid:'',
                name:'',
                date:[],
                startTime: '',
                leader:'',
                endTime: '',
                status: '00',
                result:'02',
                description: '',
                selfEnable:'',
            },
            condition: {
                did: '00',
                status: '01'
            },
            rules: {
                leader: [
                    { required: true, message: '请选择审批人', trigger: 'blur' },
                ],
                 date: [
                    { required: true, message: '请选择请假时间', trigger: 'blur' },
                ],
                description: [
                    { required: true, message: '请选填入请假原因', trigger: 'blur' },
                ]
            }
        };
    },
    created: function () {
        this.getLeaveResult();
        this.init();
    },
    methods: {
        goback(){
            this.$router.go(-1);
        },

        async getSuperior(){
            var d=await this.$http.get("/superior/"+this.leave.pid)
            if(d.code==200){
                if(d.data!=null){
                    this.superiors=d.data
                }else{
                    this.superiors=[];
                }
                
            }
        },


        async init() {
          var d = await this.$http.get("/leave/"+this.id)
          if(d.code==200){
              this.leave=d.data;
              this.initForm(d.data);
               this.getSuperior();
          }
        },

        getLeaveResult(){
            this.leaveResult=JSON.parse(window.sessionStorage.getItem("leaveResult"))
        },

        initForm(leave){
            this.form.id=leave.id;
            this.form.pid=leave.pid;
            this.form.tid=leave.tid;
            this.form.startTime=leave.startTime;
            this.form.endTime=leave.endTime;
            this.form.leader=leave.leader;
            this.form.status=leave.status;
            this.form.result=leave.result;
            this.form.description=leave.description;
            this.form.name=leave.name;
            this.form.selfEnable=leave.selfEnable;
            this.form.date=[leave.startTime,leave.endTime]

        },

        setTimeValue(val){
            this.form.startTime=val[0];
            this.form.endTime=val[1];
        },

        onSubmit(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    var d = await this.$http.put('/leave', this.form);
                    if (d.code == 200) {
                        this.$message.success(d.message);
                        this.reload();
                    } else {
                        this.$message.error(d.message);
                    }
                } else {
                    this.$message.warning('请把内容填写完整!');
                }
            });
        },

        reset(formName) {
            this.$confirm('此操作将重置所有信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                  this.initForm(this.leave)
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
        }
    }
};
</script>